<script setup lang="ts">
import { Ref, nextTick, ref } from 'vue'
import audit from '../assets/1634719160.mp3'
import { router } from '../router';

defineProps<{ msg: string }>()

const count = ref(0)
const url = ref(audit);
var audio = ref(null) as unknown as Ref<HTMLAudioElement>;
const playing = ref(false);
nextTick(() => {
  audio.value.muted = false;
  audio.value.loop = false;
  audio.value.src = url.value
  if (count.value <= 0) {
    audioAutoPlay();
  }
})
function audioAutoPlay() {
  console.log("audio play...");
  audio.value.play();
  playing.value = true;
  document.addEventListener(
    "WeixinJSBridgeReady",
    function () {
      audio.value.play();
      playing.value = true;
    },
    false
  );
  count.value++;
}
//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
function touchstart() {
  if (count.value <= 0) {
    audioAutoPlay();
  }
}
function Rotation() {
  playing.value = !playing.value;
  console.log(playing.value);
  if (playing.value) {
    // $("#Rotation").addClass("Rotation");
    audio.value.play();
  } else {
    // $("#Rotation").removeClass("Rotation");
    audio.value.pause();
  }
}
const push = router.push
const list = ref([{ url: '../assets/img/1686543809.png_thumb.jpg', name: '1九阳空气炸锅 KL45-VF711【尾款到店付】', oriPrice: 201, prePrice: 10, nowPrice: 99, id: 1 },
{ url: '../assets/img/1686543809.png_thumb.jpg', name: '2九阳空气炸锅 KL45-VF711【尾款到店付】', oriPrice: 202, prePrice: 11, nowPrice: 99, id: 2 },
{ url: '../assets/img/1686543809.png_thumb.jpg', name: '3九阳空气炸锅 KL45-VF711【尾款到店付】', oriPrice: 203, prePrice: 12, nowPrice: 99, id: 3 },
{ url: '../assets/img/1686543809.png_thumb.jpg', name: '4九阳空气炸锅 KL45-VF711【尾款到店付】', oriPrice: 204, prePrice: 13, nowPrice: 99, id: 4 },
{ url: '../assets/img/1686543809.png_thumb.jpg', name: '5九阳空气炸锅 KL45-VF711【尾款到店付】', oriPrice: 205, prePrice: 14, nowPrice: 99, id: 5 },
{ url: '../assets/img/1686543809.png_thumb.jpg', name: '6九阳空气炸锅 KL45-VF711【尾款到店付】', oriPrice: 206, prePrice: 15, nowPrice: 99, id: 6 }])
</script>

<template>
  <div @touchstart="touchstart" class="body">
    <div class="leftbtns">
      <a onclick="toshare()" class="leftbtn_2"></a>
    </div>
    <div class="banner">
      <img src="../assets/img/1684412005.jpg" style="width: 100%;vertical-align: middle;" />
      <div class="position">湖北省</div>

      <div id="Rotation" class="vAndi2" @click="Rotation" :class="{ Rotation: playing }">
        <img src="../assets/img/music.png" />
      </div>
      <audio style="display: block; height: 1px" ref="audio" preload="auto" muted playsinline :src="url">
        <source type="audio/mp3" :src="url" />
      </audio>
    </div>

    <div class="product" style="clear: both">
      <h4 class="title">爆款列表</h4>

      <div class="media media-pro" v-for="item in list" :key="item.id">
        <div class="media-left">
          <a @click="push('/product/'+item.id)">
            <img class="media-object" :src="item.url" />
          </a>
        </div>
        <div class="media-body" style="position: relative">
          <h5 class="media-heading">{{ item.name }}</h5>
          <div class="barginnum" style="position: absolute; left: 5px; bottom: 5px">
            <span>已抢0件</span>
            <span>剩余10件</span>
          </div>
          <div class="priceorg"> 原价: ¥{{ item.oriPrice }} <span class="right">¥{{ item.nowPrice }}</span>
          </div>
          <div class="probtn">
            <span class="left"></span>
            <span class="right">
              <a href="/activity/sign/1982">去抢购</a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.signguize {
  display: flex;
  flex-direction: column;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

#Rotation {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 20000;
  cursor: pointer;
}

#Rotation img {
  width: 30px;
  height: 30px;
}


.Rotation {
  -webkit-transform: rotate(360deg);
  animation: rotation 3s linear infinite;
  -moz-animation: rotation 3s linear infinite;
  -webkit-animation: rotation 3s linear infinite;
  -o-animation: rotation 3s linear infinite;
}
.product{
  padding-bottom: 20px;
}
.body{background:#cc214e; padding-bottom:0;}
</style>
